<template>
  <view class="numberPad">
    <view class="msgRow">
      <!-- <view class="dateBox">
        <nuxt-icon name="user/calendar"/>
        <span>
          <span @click="showCalendar = true">{{ padForm.date }}</span>
          <van-popup v-model:show="showCalendar" position="bottom">
            <van-date-picker
              v-model="refDate"
              title="选择日期"
              @confirm="handleDateConfirm"
              @cancel="showCalendar = false"
              @change="handleDateChange"
            />
          </van-popup>
        </span>
      </view> -->
      <span class="amountBox">{{ padForm.amount }}</span>
    </view>
    <view class="numPad">
      <view class="btn" v-for="btn in buttons" :key="btn.text" @click="btn.onClick">
        <!-- <van-button block :type="btn.type"> -->
        <wd-icon v-if="btn?.renderIcon" :name="btn.icon" size="22px"></wd-icon>
        <!-- <wd-icon name="calendar" size="22px"></wd-icon> -->
        <text v-else>{{ btn.text }}</text>
        <!-- </van-button> -->
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup name="NumberPad">
import dayjs from 'dayjs'

const padForm = reactive({
  amount: '0',
  date: '',
})
const refDate = ref<string[]>([])
onMounted(() => {
  padForm.date = dayjs().format('YYYY-MM-DD')
  refDate.value = padForm.date.split('-')
})
const handleDateChange = (value: Record<string, any>) => {
  padForm.date = value.selectedValues.join('-')
}
const showCalendar = ref<boolean>(false)
const handleDateConfirm = () => {
  showCalendar.value = false
  padForm.date = refDate.value.join('-')
}

const handleBtnNum = (value: string) => {
  const aLen = padForm.amount.length
  if (aLen >= 7) return
  const dotIndex = padForm.amount.indexOf('.')
  if (dotIndex >= 0 && aLen - dotIndex > 2) return
  if (value === '.' && dotIndex >= 0) return
  if (value === '0' && padForm.amount === '0') return
  if (value !== '0' && value !== '.' && padForm.amount === '0') padForm.amount = ''
  padForm.amount += value
}
const handleBtnDel = () => {
  const aLen = padForm.amount.length
  if (aLen === 1) {
    padForm.amount = '0'
  } else {
    padForm.amount = padForm.amount.slice(0, aLen - 1)
  }
}
const emit = defineEmits(['submit'])
const handleSubmit = () => {
  const amount = padForm.amount.split('').filter((item: string) => item !== '.')
  const isZero = amount.every((item: string) => item === '0')
  if (isZero) {
    // showDialog({
    //   title: '出错',
    //   message: '金额不能为零',
    //   width: '80%',
    //   confirmButtonColor: '#ee0a24'
    // })
    return
  }
  emit('submit', {
    happen_at: new Date(padForm.date),
    amount: +padForm.amount * 100,
  })
}
// const buttons: PadBtn[] = [
const buttons = [
  {
    text: '1',
    onClick: () => {
      handleBtnNum('1')
    },
    type: 'default',
  },
  {
    text: '2',
    onClick: () => {
      handleBtnNum('2')
    },
    type: 'default',
  },
  {
    text: '3',
    onClick: () => {
      handleBtnNum('3')
    },
    type: 'default',
  },
  {
    text: '4',
    onClick: () => {
      handleBtnNum('4')
    },
    type: 'default',
  },
  {
    text: '5',
    onClick: () => {
      handleBtnNum('5')
    },
    type: 'default',
  },
  {
    text: '6',
    onClick: () => {
      handleBtnNum('6')
    },
    type: 'default',
  },
  {
    text: '7',
    onClick: () => {
      handleBtnNum('7')
    },
    type: 'default',
  },
  {
    text: '8',
    onClick: () => {
      handleBtnNum('8')
    },
    type: 'default',
  },
  {
    text: '9',
    onClick: () => {
      handleBtnNum('9')
    },
    type: 'default',
  },
  {
    text: '0',
    onClick: () => {
      handleBtnNum('0')
    },
    type: 'default',
  },
  {
    text: '.',
    onClick: () => {
      handleBtnNum('.')
    },
    type: 'default',
  },
  {
    text: '删除',
    icon: 'keyboard-delete',
    onClick: () => {
      handleBtnDel()
    },
    renderIcon: true,
    type: 'default',
  },
  {
    text: '提交',
    onClick: () => {
      handleSubmit()
    },
    type: 'primary',
  },
  {
    text: 'AC',
    onClick: () => {
      padForm.amount = '0'
    },
    type: 'default',
  },
  {
    text: '日历',
    icon: 'calendar',
    onClick: () => {
      handleBtnDel()
    },
    renderIcon: true,
    type: 'default',
  },
]
</script>
<style scoped lang="scss">
.numberPad {
  padding-top: 2px;
  background-color: var(--numPad-bg);
  .msgRow {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--numPad-msgRow-bg);
    .dateBox {
      display: inline-flex;
      align-items: center;
      :deep(.nuxt-icon) svg {
        width: 28px;
        height: 28px;
        margin-right: 4px;
        color: var(--amount-text-color);
      }
    }
    .amountBox {
      flex: 1;
      width: 100px;
      font-size: 20px;
      color: var(--amount-text-color);
      text-align: right;
    }
  }
  .numPad {
    display: grid;
    grid-template-areas:
      'n1 n2 n3 d'
      'n4 n5 n6 ca'
      'n7 n8 n9 s'
      'ac n0 nd s';
    grid-auto-rows: 48px;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 2px;
    > .btn {
      border: none;
      border-radius: 4px;
      &:nth-child(1) {
        grid-area: n1;
      }
      &:nth-child(2) {
        grid-area: n2;
      }
      &:nth-child(3) {
        grid-area: n3;
      }
      &:nth-child(4) {
        grid-area: n4;
      }
      &:nth-child(5) {
        grid-area: n5;
      }
      &:nth-child(6) {
        grid-area: n6;
      }
      &:nth-child(7) {
        grid-area: n7;
      }
      &:nth-child(8) {
        grid-area: n8;
      }
      &:nth-child(9) {
        grid-area: n9;
      }
      &:nth-child(10) {
        grid-area: n0;
      }
      &:nth-child(11) {
        grid-area: nd;
      }
      &:nth-child(12) {
        grid-area: d;
      }
      &:nth-child(13) {
        grid-area: s;
      }
      &:nth-child(14) {
        grid-area: ac;
      }
      &:nth-child(15) {
        grid-area: ca;
      }
      .van-button--block {
        height: 100%;
        border: none;
      }
    }
  }
}
</style>
